<template>
  <div>
    <div>
      <v-layout class="px-2 pb-2">
        <v-flex xs2
          ><v-btn depressed @click="addBrand" color="primary">
            新增品牌
          </v-btn></v-flex
        >
        <v-spacer />
        <v-flex xs3
          ><v-text-field
            label="搜索"
            hide-details
            append-icon="search"
            v-model="key"
          ></v-text-field
        ></v-flex>
      </v-layout>
    </div>
    <v-data-table
      :headers="headers"
      :items="items"
      :pagination.sync="pagination"
      :total-items="totalItems"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image" alt="" /></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-btn
            class="mx-1"
            dark
            small
            color="cyan"
            @click="editBrand(props.item)"
          >
            修改
          </v-btn>
          <v-btn
            class="mx-2"
            dark
            small
            color="red"
            @click="deleteBrand(props.item)"
          >
            删除
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <v-dialog v-model="show" max-width="600" scrollable v-if="show">
      <v-card>
        <v-toolbar dark dense color="primary">
          <v-toolbar-title>{{
            isEdit ? "修改品牌" : "新增品牌"
          }}</v-toolbar-title>
          <v-spacer />
          <v-btn icon @click="show = false">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="px-5 py-2">
          <!-- 表单 -->
          <brand-form
            :oldBrand="brand"
            :isEdit="isEdit"
            @close="show = false"
            :reload="getDataFromApi"
          />
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import BrandForm from "./BrandForm";
import { brandData } from "../../mockDB";

export default {
  name: "brand",
  components: {
    BrandForm,
  },
  data() {
    return {
      // 表头数组
      headers: [
        {
          text: "品牌id",
          align: "start",
          sortable: true,
          value: "id",
        },
        {
          text: "品牌名称",
          value: "name",
          sortable: true,
          class: "column sortable active asc text-xs-center",
        },
        {
          text: "品牌图片地址",
          value: "image",
          class: "column sortable active asc text-xs-center",
        },
        {
          text: "品牌的首字母",
          value: "letter",
          sortable: true,
          class: "column sortable active asc text-xs-center",
        },
      ],
      //   表单数据
      items: [],
      totalItems: 0,
      show: false,
      pagination: {},
      loading: false,
      key: "",
      isEdit: false,
      row: 0,
      rows: 5,
      brand: {}, // 品牌信息
    };
  },

  created() {
    // this.brands = this.items;
  },
  watch: {
    key() {
      this.loadBrands();
    },
    pagination: {
      deep: true,
      handler() {
        this.loading = true;
        this.loadBrands();
        this.loading = false;
      },
    },
    show(val, oldVal) {
      // 表单关闭后重新加载数据
      if (oldVal) {
        this.getDataFromApi();
      }
    },
  },
  mounted() {
    this.getDataFromApi();
  },
  methods: {
    loadBrands() {
      // console.log(this.pagination);
      this.$http
        .get("/item/brand/page", {
          params: {
            pageNum: this.pagination.page, // 当前页
            rows: this.pagination.rowsPerPage,
            key: this.key,
            sortBy: this.pagination.sortBy,
            desc: this.pagination.descending,
          },
        })
        .then((resp) => {
          this.items = resp.data.records;
          this.totalItems = resp.data.total;
        });
    },
    addBrand() {
      this.brand = {};
      this.isEdit = false;
      this.show = true;
    },
    getDataFromApi() {
      this.loading = true;
      // 200ms后返回假数据
      this.$http.get("/item/brand/list").then((resp) => {
        this.items = resp.data;
      });
      this.loading = false;
      // this.$message.success("请求数据成功!")
    },
    deleteBrand(item) {
      this.$message
        .confirm("此操作将永久删除该品牌, 是否继续?")
        .then(() => {
          // 发起删除请求
          this.$http.delete("/item/brand?id=" + item.id).then(() => {
            // 删除成功，重新加载数据
            this.$message.success("删除成功！");
            this.loadBrands();
          });
        })
        .catch(() => {
          this.$message.info("删除已取消！");
        });
    },
    editBrand(item) {
      console.log(item)
      this.brand = item;
      console.log(this.brand)
      this.isEdit = true;
      this.show = true;
      // 查询商品分类信息，进行回显
      this.$http.get("/item/category/bid/" + item.id).then((resp) => {
        this.brand.categories = resp.data;
      });
    },
  },
};
</script>

<style>
</style>